<template>
	<view class="one-store">
		<view class="search_box">
			<uni-easyinput class="search" type="text" placeholderStyle="font-size:28rpx;" @confirm="search"
				:inputBorder="false" @clear="clear" prefixIcon="search" @input="input" v-model="selectValue"
				placeholder="请输入商品名称，编号，规格，型号搜索"></uni-easyinput>
			<view class="search_btn" @click="search">
				搜索
			</view>
		</view>
		<view class="scroll_content">
			<scroll-view class="scroll-view_list" :refresher-triggered="triggered" refresher-background="transparent"
				@refresherpulling="refresherpulling" refresher-enabled="true" scroll-y="true"
				@scrolltolower="scrolltolower" @refresherrefresh="onRefresh">
				<view v-if="oneStoreList.rows.length==0" class="void_goods">
					<image class="img" src="/static/goods.svg"></image>
					<view class="tip">暂无库存</view>
				</view>
				<view class="goods_info">
					<view v-for="(item,index) in oneStoreList.rows" @click="storeDetail()" :key="index" class="goods_info_item_li">
						<view class="goods_info_conent">
							<view class="left_img">
								<image v-if="item.image" @click="lookImg(item.image)"
									class="img" lazy-load :src="item.image" mode="aspectFill"></image>
								<uni-icons color="#aae" size="48" type="image"></uni-icons>
							</view>
							<view class="right_text">
								<view class="brands">
								{{item.goodsName}}
								</view>
								<view class="pt">
									<span class="tip">商品编号：</span>
									<view class="lis">
										{{item.goodsCode}}
									</view>
								</view>
								<view class="pt">
									<span class="tip">商品型号：</span>
									<view class="lis">
										{{item.goodsModel}}
									</view>
								</view>
								<view class="pt">
									<span class="tip">商品规格：</span>
									<view class="lis">
										{{item.goodsSpecName}}
									</view>
								</view>
								<view class="pt">
									<span class="tip">商品分类：</span>
									<view class="lis">
										{{[item.type,item.typeOne,item.typeThree].filter(o=>o).join('、')}}
									</view>
								</view>
								<view class="pt">
									<span class="tip">所在仓库：</span>
									<view class="lis">
										{{item.store}}
									</view>
								</view>
								<view class="pt">
									<span class="tip">可用库存：</span>
									<view class="lis" style="color: #007cff;">
										{{item.availableStock}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="no_some" v-if="oneStoreList.rows.length>0">
						{{titleHint}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import {onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
import apiParts from "@/util/network_api/parts.js"
	import _ from "lodash";
	const triggered = ref(false)
	// 搜索
	const selectValue = ref('')
	const selectVo = ref({
		"name": "",//搜索关键词：仓库名称
		"limit": 0,
		"page": 1,
	})
	// 底部显示提示
	const titleHint = ref('没有更多了')
	const oneStoreList = ref({
		total: 0,
		rows: []
	})
	const clear = () => {
		selectValue.value = ''
		search()
	}
	const search = _.debounce(async () => {
		selectVo.value.name = selectValue.value.trim()
		uni.showLoading({
			title: '加载中...',
			mask:true
		})
		getOneStoreList()
	}, 500)
	const input = (n) => {
		if (!n) {
			search()
		}
	}
	// 获取列表
	const getOneStoreList = async () => {
		await apiParts.getStoreGoodsStockDetailList(selectVo.value).then(res => {
			if (res.code == 20000) {
				if (oneStoreList.value.rows.length < oneStoreList.value.total && selectVo.value.page > 1) {
					oneStoreList.value.rows = [...oneStoreList.value.rows, ...res.data.rows]
				} else {
					oneStoreList.value.rows = res.data.rows
				}
				oneStoreList.value.total = res.data.total - 0
			}
		})
		if (triggered.value) {
			setTimeout(() => {
				triggered.value = false
			}, 400)
		}
		uni.hideLoading()
	}
	onLoad(async () => {
		uni.showLoading({
			title: '加载中',
		})
		getOneStoreList()
		// 获取用户信息
		// await store.dispatch('getUpdataUser')
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 下拉刷新
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}
	const onRefresh = () => {
		selectVo.value.name = ''
		selectVo.value.page = 1
		getOneStoreList()
	}
	// 底部触发
	const scrolltolower = () => {
		if (oneStoreList.value.rows.length < oneStoreList.value.total) {
			selectVo.value.page += 1
			titleHint.value = ''
			getOneStoreList()
		} else {
			titleHint.value = '没有更多了'
		}
	}
	// 预览图片
	const lookImg = (url) => {
		uni.previewImage({
			urls: [url],
		})
	}
	const storeDetail = () => {
		// uni.navigateTo({
		// 	url: '/pages_network/home/storeContent/storeDetail'
		// })
	}
</script>

<style lang="scss" scoped>
	.one-store {
		/* #ifdef H5 */
		height: calc(100vh - 88rpx);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;

		.search_box {
			display: flex;
			align-items: center;
			padding: 24rpx;
			background-color: #fff;

			:deep(.uni-easyinput__content) {
				background-color: #f3f4f8 !important;
				border-radius: 50rpx;
			}

			.search {
				flex: 1;
				padding: 0 12rpx;
			}

			.search_btn {
				font-size: 28rpx;
				font-weight: bold;
				color: #007cff;
				margin-left: 12rpx;
			}
		}

		.scroll_content {
			height: 100%;
			// flex: 1;
			overflow: hidden;

			.scroll-view_list {
				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}

				height: 100%;
				padding: 24rpx;
				box-sizing: border-box;

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 50vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}

				.goods_info {
					// margin: 24rpx;
					box-sizing: border-box;
					background-color: fafafa;
					padding-bottom: 300rpx;
					display: flex;
					flex-direction: column;
					gap: 24rpx;

					.no_some {
						font-size: 24rpx;
						color: #ccc;
						text-align: center;
						width: 100%;
						padding-bottom: 24rpx;
					}

					.goods_info_item_li {
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						position: relative;
						padding: 24rpx;
						background-color: #fff;
						// margin: 32rpx 0;

						.goods_info_conent {
							display: flex;
							// align-items: center;
							width: 100%;
							flex: 1;

							.left_img {
								width: 180rpx;
								height: 180rpx;
								box-shadow: 0 0 2rpx 2rpx #eee;
								border-radius: 4rpx;
								margin: 0 20rpx 0 0;

								.img {
									width: 100%;
									height: 100%;
									border-radius: 4rpx;
								}
							}

							.right_text {
								font-size: 24rpx;
								flex: 1;
								position: relative;

								.brands {
									font-weight: bold;
									font-size: 28rpx;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;

								}

								.pt {
									margin-top: 16rpx;
									display: flex;
									align-items: center;
									width: 100%;
									justify-content: flex-start;

									.tip {
										color: #777;
									}

									.lis {
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
										overflow: hidden;
										word-wrap: break-word;
										word-break: break-all;
										flex: 1;
										font-weight: bold;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>